<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { useAppStoreHook } from '@/stores/modules/app'
	
	import loginForm from '@/components/login-form.vue'
	import enrollForm from '@/components/enroll-form.vue'
	
	const useAppStore = useAppStoreHook()
	const pageHeight = ref(0)
	const tabNum = ref(0)
	const tabList = ref([
		{ text: '登录' },
		{ text: '注册' },
	])
	
	// 获取视图可视化高度
	const reELSet = () => {
		const res = uni.getSystemInfoSync()
		pageHeight.value = res.windowHeight
	}
	
	onMounted(() => {
		reELSet()
	})
</script>

<template>
	<view class="page-login" :style="`height: ${pageHeight}px`">
		<view class="login-title">
			<text class="login-title-itme1">您好，</text>
			<text class="login-title-itme2">欢迎使用 {{ useAppStore.appName }}。</text>
		</view>
		<view class="login-box">
			<wd-tabs
				:lineWidth="0"
				v-model="tabNum"
				color="#ffffff"
				custom-class="wd-tabs"
				inactiveColor="#dddddd">
				<block v-for="(item, index) in tabList" :key="index">
					<wd-tab :title="item.text">
						<view class="form-content-box" v-if="index === 0">
							<loginForm></loginForm>
						</view>
						<view class="form-content-box" v-else>
							<enrollForm></enrollForm>
						</view>
					</wd-tab>
				</block>
			</wd-tabs>
		</view>
	</view>
</template>

<style lang="scss">
.page-login {
	width: 100%;
	background-color: #0f0b18;
	
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
	
	.login-title {
		width: 85%;
		height: 260rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		
		.login-title-itme1 {
			color: #7a9aff;
			font-size: 70rpx;
			font-weight: 500;
			word-spacing: 2rpx;
			letter-spacing: 2rpx;
		}
		.login-title-itme2 {
			color: #ffffff;
			font-size: 40rpx;
			font-weight: 600;
			word-spacing: 2rpx;
			letter-spacing: 2rpx;
		}
	}
	
	.login-box {
		width: 100%;
		height: 900rpx;
		padding: 50rpx;
		box-sizing: border-box;
		
		:deep(.wd-tabs__nav) {
			border-bottom: 2rpx solid #5A5C61;
			background-color: transparent !important;
		}
		:deep(.wd-tabs) {
			background-color: transparent !important;
			
			.form-content-box {
				color: #7a9aff;
			}
		}
	}
}
</style>
